<script setup lang="ts">
  import { ref, watch } from 'vue'
  import axios from 'axios'
import { onClickOutside } from '@vueuse/core';
  
  // 城市列表的类型
  interface AreaList {
    code: string;
    level: number;
    name: string;
    areaList: {
      code: string;
      level: number;
      name: string;
      areaList: AreaList[];
    }[];
  }
  interface AreaList {
    code: string;
    level: number;
    name: string;
  }
  interface CityResult {
    provinceCode: string,
    provinceName: string,
    cityCode: string,
    cityName: string,
    CountryCode: string,
    CountryName: string,
  }
  
  defineProps<{
    address: String
  }>()
  const emit = defineEmits<{
    (e:'changeCity', value: CityResult): void
  }>()

  // 1. 选择城市语气显示/隐藏
  const isShow = ref(false)
  // 2. 获取城市列表
  const cityList = ref<AreaList[]>([])
  const cityList1 = ref<AreaList[]>([])
  const getCityList = async() => {
    const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
    // console.log('城市列表',res.data)
    cityList.value = res.data
    cityList1.value = res.data
  }
  getCityList()

  // 3. 选择城市
  const selectCity = ref({
    provinceCode: '',
    provinceName: '',
    cityCode: '',
    cityName: '',
    CountryCode: '',
    CountryName: '',
  })
  const changeCity = (city: AreaList) => {
    if(city.level === 0) {
      selectCity.value.provinceCode = city.code
      selectCity.value.provinceName = city.name
      cityList.value = city.areaList
    }
    if(city.level === 1) {
      selectCity.value.cityCode = city.code
      selectCity.value.cityName = city.name
      cityList.value = city.areaList
    }
    if(city.level === 2) {
      selectCity.value.CountryCode = city.code
      selectCity.value.CountryName = city.name
      // 选择完毕 关闭弹层
      isShow.value = false
      // 传递选择的城市给父组件
      emit('changeCity', selectCity.value)
    }
  }

  // 4. 在目标之外点击 关闭可视区域
  const target = ref(null)
  onClickOutside(target, () => {
    isShow.value = false
  })

  // 5. 监听弹窗的关闭
  watch(isShow, (value) => {
    // console.log('isShow', value);
    if(!value) {
      cityList.value = cityList1.value
    }
  })
</script>

<template>
<div class="total-city" ref="target">
  <div class="select active">
    <span class="value" v-if="address">{{address}}</span>
    <span class="placeholder" v-else>请选择配送地址</span>
    <span class="value"></span>
    <i @click="isShow=!isShow" v-if="!isShow" class="iconfont icon-angle-down"></i>
    <i @click="isShow=!isShow" v-else="isShow" class="iconfont icon-angle-right"></i>
  </div>
  <div class="option" v-show="isShow">
    <span class="ellipsis" @click="changeCity(item)"  v-for="item in cityList" :key="item.code">
      {{item.name}}
    </span>
    </div>
  </div>
</template>

<style scoped lang="less">
  .total-city {
    display: inline-block;
    position: relative;
    z-index: 400;
    .select {
      border: 1px solid #e4e4e4;
      height: 30px;
      padding: 0 5px;
      line-height: 28px;
      cursor: pointer;
      &.active {
        background: #fff;
      }
      .placeholder {
        color: #999;
      }
      .value {
        color: #666;
        font-size: 12px;
      }
      i {
        font-size: 12px;
        margin-left: 5px;
      }
    }
    .option {
      width: 542px;
      border: 1px solid #e4e4e4;
      position: absolute;
      left: 0;
      top: 29px;
      background: #fff;
      min-height: 30px;
      line-height: 30px;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      > span {
        width: 130px;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 3px;
        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }
</style>
